<template>
    <div class="preOderInfo">
        <index-top />
        <div class="preOderMain">
            <div class="mainHeader">
                <span style="cursor: pointer" @click="goHome"><img :src="logo" width="150px" height="55px" alt="" /></span>
                <span style="font-size: 18px;font-weight:530;margin-left: 10px">结算页</span>
            </div>
            <div class="steps">
                <el-steps :active="2" space="200px" align-center>
                    <el-step title="1.我的购物车"></el-step>
                    <el-step title="2.填写核对订单信息"></el-step>
                    <el-step title="3.成功提交订单"></el-step>
                </el-steps>
            </div>
        </div>
        <div class="preOderMain"><span class="preOderTitle">填写并核对订单信息</span></div>
        <div style="display: flex">
            <div class="orderInfo">
                <ul>
                    <li>
                        <div style="margin-left: 15px"><span>
                                <h3>收货人信息</h3>
                            </span><span style="display: flex;align-items: center;color: #005ea7;cursor: pointer;margin-right: 10px" @click="addReceiver">新增收货地址</span></div>
                        <div style="margin-left:25px;border-radius:2px;margin-bottom:20px;display: flex;position: relative" v-for="(item,index) in receiverVOList" :key="index">
                            <span v-if="isShowPos" :style="getItemStyle(item)" @click="selectReciver(item)">{{item.receiver}}</span>
                            <span v-if="isShowPos">{{item.position}} {{item.phone}}</span>
                            <span v-if="isShowPos" @click="deletePos(item)" style="display: flex;align-items: center;align-self: flex-end;position: absolute;right:20px;top: 0px;cursor: pointer;color: #005ea7">删除</span>
                        </div>
                    </li>
                    <li>
                        <div style="margin-top: 5px;margin-left: 12px;display: flex"><span class="payType">
                                <h3>支付方式</h3>
                            </span></div>
                        <div class="payTypeContent"><span>货到付款</span><span>在线支付</span><span>对公账号</span></div>
                    </li>
                    <li style="display: flex;flex-direction: column;margin-top: 5px">
                        <div style="display: flex;justify-content: space-between">
                            <span style="margin-left: 15px">
                                <h3>送货清单</h3>
                            </span>
                            <span style="margin-right: 15px;display: flex;align-items: center;cursor: pointer;color: #005ea7;cursor: pointer">返回购物车修改</span>
                        </div>
                        <div class="shoppingProducts">
                            <ul>
                                <li>
                                    <div>
                                        <h4 style="margin-left: 15px">配送方式</h4>
                                    </div>
                                    <div style="display: flex"><span style="width:145px;height: 30px;border:2px solid #e4393c;display: flex;align-items: center;justify-content: center;cursor: pointer;margin-left: 15px;">快递运输</span></div>
                                    <div style="display: flex;margin-top: 15px;margin-bottom: 15px;margin-left: 15px"><span style="color: #999;min-width: 60px">配送时间:</span><span>预计7月15日24:00前送达</span></div>
                                </li>
                                <li>
                                    <div>
                                        <ul style="display: flex;flex-direction:column;padding: 0px;margin: 0px">
                                            <li v-for="(cartItem,index) in cartItems" style="display: flex;margin: 20px" :key="index">
                                                <span><img :src="cartItem.images.split(',')[0]" width="80px" height="80px"></span>
                                                <span style="max-width:200px">
                                                    <div style="margin-left: 10px">{{cartItem.title}}</div>
                                                    <div style="margin-top: 10px;margin-left: 10px">{{cartItem.ownSpecDesc}}</div>
                                                </span>
                                                <span style="min-width:60px;margin-left:50px"><strong style="color:#e4393c">￥{{cartItem.price}}</strong></span>
                                                <span style="min-width:60px;margin-left:50px">X{{cartItem.qty}}</span>
                                                <span style="min-width:60px;margin-left:50px">有货</span>
                                            </li>
                                            <li style="display: flex;margin: 20px">留言:<textarea style="margin-left:10px;width: 320px;background-color: #f3fbfe;border:1px solid #e6e6e6;outline:0" v-model="buyerMessage" type="text" /></li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div style="display: flex;justify-content: flex-end;padding:0px 255px" class="payGoodsInfo">
                <ul style="display: flex;margin: 0px;padding: 0px;flex-direction: column">
                    <li><span><font style="color: red">{{totalQty}}</font> 件商品，总商品金额：</span><span>￥{{totalAmount}}</span></li>
                    <li><span>运费:</span><span>￥0.00</span></li>
                    <li><span>返现:</span><span>￥0.00</span></li>
                </ul>
        </div>
        <div class="payTotal">
            <div style="display: flex;height: 100%;background-color:#f4f4f4;flex-direction:column;justify-content: center">
                <div style="display:flex;justify-content:flex-end;margin-right: 10px"><span style="margin-right: 50px;color: #666;display: flex;align-items: center">应付总额:</span><span style="color: #e4393c;font-family:Verdana;font-weight:700;font-size:18px">￥{{totalAmount}}</span></div>
                <div style="display:flex;justify-content:flex-end;margin-top: 8px;margin-right: 10px"><span style="color: #999;">寄送至：</span><span style="color: #999;">广东 深圳市 龙岗区 坂田街道 禾平岗禾平路56号温馨家园607 </span><span style="color: #999;margin-right: 20px">收货人:</span><span style="color: #999;">胥伟 {{phone}}</span></div>
            </div>
            </div>
        <div class="buttonClass">
            <span class="submitButton" @click="submitOrder">提交订单</span>
        </div>
        <add-receiver-info v-if="isShowReceiver" @handleClose="handleClose"/>
        <common-footer/>
    </div>
</template>
<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator'
    import {Action, Getter} from 'vuex-class'
    import logo from '@/components/common/images/logo.png'
    import {namespace} from 'vuex-class';
    import IndexTop from "@/components/portal-index/customer-portal/header/indexTop.vue";
    import AddReceiverInfo from "@/components/portal-index/order-info/add-receiver-info.vue";
    import Footer from "@/components/portal-index/customer-portal/footer/index.vue";
    import CustomerApiActions from '@/components/api/customer-api-actions';
    import * as _ from 'lodash'
    @Component({
        components:{
            IndexTop,
            CommonFooter:Footer,
            AddReceiverInfo
        }
    })
    export default class PreOderInfo extends Vue {
        public logo:any="";
        public space:any="300px";
        public cartItems:Array<any>=new Array<any>();
        public positionStr:any="";
        public phone:any="";
        public userId:any="";
        public buyerMessage:any="";
        public buyerNick:any="";
        public isShowReceiver:boolean=false;
        public receiverVOList:Array<any>=new Array<any>();
        public currentSelectPos:any={};
        public isShowPos:boolean=true;
        public async created() {
            let apiActions=new CustomerApiActions(this);
            let loginUser:any=localStorage.getItem("loginUser");
            if(loginUser){
                loginUser=JSON.parse(loginUser);
                let selectItems=localStorage.getItem(loginUser.username+"_cart");
                let selectItemsArray:Array<any>=JSON.parse(selectItems);
                let selectItemIdsArray:Array<any>=new Array<any>();
                selectItemsArray.forEach(item=>{
                    selectItemIdsArray.push(item.skuId);
                })
                let result:any=await apiActions.getUserCart(selectItemIdsArray);
                let cartItems:Array<any>=result.data.cartItems;
                this.cartItems=cartItems;
            }
            this.logo=logo;
            this.positionStr=localStorage.getItem("positionStr");
            let user=await apiActions.verify();
            if(user&&user.data){
                await this.getUserPosData();
            }
        }
        public async getUserPosData(){
            let apiActions=new CustomerApiActions(this);
            let loginUser:any=JSON.parse(localStorage.getItem("loginUser"));
            let result:any=await apiActions.getUserByCondition({username:loginUser.username});
            this.buyerNick=result.data[0].username;
            this.userId=result.data[0].id;
            this.phone=result.data[0].phone;
            this.receiverVOList=result.data[0].receiverVOList;
            this.receiverVOList[0].isChecked=true;
        }
        public getItemStyle(item){
            if(item.isChecked){
                return {
                    border:"2px solid #e4393c",
                    width:"100px",
                    textAlign:"center",
                    marginRight:"10px",
                    cursor:"pointer"
                }
            }
            return {
                border:"1px solid #999",
                width:"100px",
                textAlign:"center",
                marginRight:"10px",
                cursor:"pointer"
            }
        }
        public async deletePos(item:any){
            let apiActions=new CustomerApiActions(this);
            await apiActions.deleteReceiver(item);
            await this.getUserPosData();
        }
        public selectReciver(item:any){
             this.isShowPos=false;
             this.receiverVOList.forEach((curItem,index)=>{
                  if(item.id==curItem.id){
                      curItem.isChecked=true;
                  }else{
                      curItem.isChecked=false;
                  }
             });
             this.$nextTick(()=>{
                 this.isShowPos=true;
             })

        }
        public get totalAmount(){
            let totalAmount=0;
            this.cartItems.forEach(item=>{
                if(item.price&&item.qty){
                    totalAmount=totalAmount+item.price*item.qty;
                }
            });
            return totalAmount;
        }
        public addReceiver(){
            this.isShowReceiver=true;
        }
        public get totalQty(){
            let totalQty=0;
            this.cartItems.forEach(item=>{
                if(item.price&&item.qty){
                    totalQty=totalQty+item.qty;
                }
            });
            return totalQty;
        }
        //跳转到首页
        public goHome(){
            this.$router.push({  // 核心语句
                path: '/'
            });
        }
        //关闭添加地址弹出框
        public async handleClose(data:any){
            this.isShowReceiver=false;
            await this.getUserPosData();
        }
        public async submitOrder(){
            let apiActions=new CustomerApiActions(this);
            let orderDetialList:Array<any>=new Array<any>();
            this.cartItems.forEach(item=>{
                orderDetialList.push(
                        {
                            skuId:item.skuId,
                            num:item.qty,
                            price:item.price,
                            title:item.title,
                            ownSpec:item.ownSpecDesc,
                            image:item.images
                         }
                     )
            });
            //0表示未支付
            let orderStatus:any={
                 status:0
            };
            //循环购物车
            let orderParams:any={
                 userId:this.userId,
                 totalPay:this.totalAmount,
                 actualPay:this.totalAmount,
                 paymentType:1,
                 postFee:5,
                 shippingName:"顺丰快递",
                 buyerMessage:this.buyerMessage,
                 buyerRate:0,
                 receiverAddress:this.positionStr,
                 receiverMobile:this.phone,
                 receiver:this.buyerNick,
                 buyerNick:this.buyerNick,
                 orderDetialList:orderDetialList,
                 orderStatus:orderStatus
            };
            let orderData:any=await apiActions.submitOrder(orderParams);
            await apiActions.deleteCart(orderDetialList);
            localStorage.setItem("orderData"+orderData.data.orderId,JSON.stringify(orderData.data));
            //提交完订单后跳转到支付页面
            this.$router.push({ path: '/pay',query:{orderId:orderData.data.orderId}});
        }
    }
</script>
<style lang="less">
    .payGoodsInfo{
        ul{
            li{
                list-style-type: none;
                display: flex;
                justify-content: space-between;
                margin-top:10px;
                margin-right: 20px;
            }
        }
    }
    .preOderInfo{
        .el-dialog__body{
            padding-top:0px;
        }
        .titleRight{
            >ul{
                >li:nth-child(1){
                    min-width: 120px!important;
                }
            }
        }
        .orderInfo{
            width: 100%;
            margin: auto;
            padding: 0px 255px;
            >ul{
                margin: 0px;
                background-color: #fff;
                border: 1px solid #f0f0f0;
                padding:10px;
                display: flex;flex-direction: column;
                >li{
                    margin: 0px;
                    padding: 0px;
                    list-style-type: none;
                }
                >li:nth-child(1){
                    >div:nth-child(1){
                        display: flex;
                        justify-content: space-between;
                    }
                    >div:nth-child(2){
                        display: flex;
                    }
                }
            }
        }
        height: auto;
        margin: auto;
        .payType{
            margin-left: 10px;
        }
        .payTypeContent{
            display: flex;
            margin-bottom: 15px;
            margin-left: 25px;
            span{
                cursor: pointer;
            }
            >span:nth-child(1){
                width: 98px;
                height: 30px;
                border: 1px solid #ddd;
                background: #f3f3f3;
                border-color: #ddd;
                color: #aaa;
                display: flex;
                justify-content: center;
                align-items: center;
             }
            >span:nth-child(2){
                width: 98px;
                height: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-left: 10px;
                border: 2px solid #e4393c;
            }
            >span:nth-child(3){
                width: 98px;
                height: 30px;
                border: 1px solid #ddd;
                border-color: #ddd;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-left: 10px;
            }

        }
        .shoppingProducts{
            >ul{
                display: flex;
                flex-direction: row;
                margin: 0px;
                padding: 0px;
                margin-left: 15px;
                margin-right: 15px;
                >li{
                    list-style-type: none;
                }
                >li:nth-child(1){
                    width: 300px;
                    background: rgba(247, 247, 247, 1);
                }
                >li:nth-child(2){
                    flex: 1;
                    background-color: #f3fbfe;
                }

            }

        }
        .mainWidth{
            margin-left:255px!important;
            margin-right:255px!important;
        }
        .modService {
            padding: 30px 255px!important;
        }
        .helpList{
            padding: 20px 255px!important;
        }
        .preOderMain{
            margin-top: 20px;
            padding: 0px 270px;
            height: auto;
            position: relative;
            display: flex;
            justify-content: space-between;
            .mainHeader{
                display: flex;
                align-items: center;
            }
            .preOderTitle{
                height: 42px;
                line-height: 42px;
                font-size: 16px;
                font-family: "Microsoft YaHei";
            }
            .steps{
                width: 600px;
                align-self: flex-end;
                .el-step__head.is-finish {
                    color: rgba(122, 189, 84, 1);
                    border-color: rgba(122, 189, 84, 1);
                }
                .el-step__title.is-finish {
                    color: rgba(122, 189, 84, 1);
                }
            }
        }
        .payTotal{
            height: 86px;
            margin-top: 10px;
            margin-bottom: 10px;
            ul{
                background-color: #f4f4f4;
                color: #999;
                border-top: 1px solid #e6e6e6;
            }
            padding:0px 275px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }
        .buttonClass{
            display: flex;
            justify-content: flex-end;
            padding:0px 275px;
            .submitButton{
                width: 135px;
                height: 36px;
                color: white;
                background: red;
                font-size: 16px;
                font-weight: 600;
                border-radius: 3px;
                justify-content: center;
                display: flex;
                align-items: center;
                cursor: pointer;
            }
        }
    }
</style>